<template>
    <el-container style="height: 100%">
        <el-header id="header">
            <div id="logo"><span>乐玩家</span></div>
            <div id="back" v-if="false"><i @click="$router.go(-1)" class="el-icon-arrow-left"></i></div>
            <div id="title"><span>{{ title }}</span></div>
            <div class="right">
                <div id="user">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link" >{{ username }} <i class="fa fa-angle-down"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="alter-password">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="220px" style="background-color: #f2f2f2;">
                <el-menu background-color="#f2f2f2" style="height: 100%;" :router="true" :default-active="$route.path">
                    <template v-for="item in menu">
                        <el-menu-item  v-if="item.children === undefined" :index="item.index">
                            <template slot="title">
                                <i v-bind:class="['fa', 'fa-' + item.icon]"></i>
                                <span>{{item.title}}</span>
                            </template>
                        </el-menu-item>
                        <el-submenu v-else :index="item.index">
                            <template slot="title">
                                <i v-bind:class="['fa', 'fa-' + item.icon]"></i>
                                <span>{{item.title}}</span>
                            </template>
                            <el-menu-item  v-for="elem in item.children" :index="elem.index">
                                <template slot="title">
                                    <i v-bind:class="['fa', 'fa-' + elem.icon]"></i>
                                    <span>{{elem.title}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-aside>

            <el-main>
                <div id="main">
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive"></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive"></router-view>
                </div>
            </el-main>

            <AlterPassword v-if="alterPasswordVisible" @close="alterPasswordVisible = false"></AlterPassword>

        </el-container>
    </el-container>

</template>

<script>
    import axios from 'axios'
    import bus from '../bus'
    import token from '../token'
    import AlterPassword from './AlterPassword'

    export default {
        components: {AlterPassword},
        data() {
            return {
                title: null,
                menu: [],
                username: localStorage.getItem('username'),
                alterPasswordVisible: false,
            }
        },
        async created() {
            document.title = '后台';
            this.title = this.$route.meta.title;
            bus.$on('title', title => this.title = title);
            this.menu = await axios.get('/menu');
        },
        methods: {
            async handleCommand(command) {
                if (command === 'logout') {
                    token.delete();
                    this.$router.go();
                } else if (command === 'alter-password') {
                    this.alterPasswordVisible = true;
                }
            },
        }
    }
</script>

<style>

    #header {
        height: 48px !important;
        display: flex;
        padding: 0;
        background-color: #409EFF;
        color: white;
        box-shadow: 0 0 8px #aaa;
        position: relative;
        z-index: 100;
    }

    #logo {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2em;
        letter-spacing: 4px;
        width: 220px;
    }

    #back {
        display: flex;
        align-items: center;
        font-size: 1.2em;
        padding: 10px 10px;
        cursor: pointer;
    }

    #back a {
        color: white;
        text-decoration: none;
    }

    #title {
        display: flex;
        align-items: center;
        font-size: 1em;
    }

    #header .right {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }

    #user {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 10px;
        font-weight: bold;

    }

    #user > .el-dropdown {
        color: white;
        padding: 10px;
        font-size: 1.0em;
        user-select: none;
    }

    #user > .el-dropdown > .el-dropdown-link {
        cursor: pointer;
    }

    .el-menu .fa {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }

    .el-submenu__title {
        height: 48px !important;
        line-height: 48px !important;
    }

    .el-submenu .el-menu-item {
        height: 40px;
        line-height: 40px;
    }

    .el-menu-item.is-active {
        background-color: rgba(0, 0, 0, .1) !important;
    }
    #main > form {
        margin-top: 40px;
    }
</style>
